import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/assets/styles.dart';
import 'package:pornhub_app/components/app_bar/app_bar_view.dart';
import 'package:pornhub_app/components/base_refresh/base_refresh_widget.dart';
import 'package:pornhub_app/components/image_view.dart';
import 'package:pornhub_app/components/text_view.dart';
import 'package:pornhub_app/generate/app_image_path.dart';
import 'package:pornhub_app/utils/color.dart';
import 'package:pornhub_app/utils/extension.dart';
import 'package:pornhub_app/views/mine/vip/vip_exchange_page_controller.dart';

class VipExchangePage extends GetView<VipExchangePageController> {
  const VipExchangePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: COLOR.color_161616,
      appBar: _buildAppBar(),
      body: _buildBodyView(),
    );
  }

  _buildAppBar() {
    return AppBarView(
      titleText: "会员兑换",
    );
  }

  _buildBodyView() {
    return BaseRefreshWidget(controller,
        child: CustomScrollView(
          slivers: [
            Container(
              padding: EdgeInsets.only(left: 14.w, right: 14.w, top: 20.w),
              child: Obx(() => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: 76.w,
                        height: 60.w,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    controller.selectIndex.value == 0
                                        ? AppImagePath.vip_exchange_on
                                        : AppImagePath.vip_exchange))),
                        child: TextView(
                          text: "周卡VIP",
                          style: kTextStyle(
                              controller.selectIndex.value == 0
                                  ? COLOR.color_FF9205
                                  : COLOR.white,
                              fontsize: 15.w,
                              weight: FontWeight.w600),
                        ),
                      ).onOpaqueTap(() {
                        if (controller.selectIndex.value != 0) {
                          controller.selectIndex.value = 0;
                        }
                      }),
                      Container(
                        width: 76.w,
                        height: 60.w,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    controller.selectIndex.value == 1
                                        ? AppImagePath.vip_exchange_on
                                        : AppImagePath.vip_exchange))),
                        child: TextView(
                          text: "月卡VIP",
                          style: kTextStyle(
                              controller.selectIndex.value == 1
                                  ? COLOR.color_FF9205
                                  : COLOR.white,
                              fontsize: 15.w,
                              weight: FontWeight.w600),
                        ),
                      ).onOpaqueTap(() {
                        if (controller.selectIndex.value != 1) {
                          controller.selectIndex.value = 1;
                        }
                      }),
                      Container(
                        width: 76.w,
                        height: 60.w,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    controller.selectIndex.value == 2
                                        ? AppImagePath.vip_exchange_on
                                        : AppImagePath.vip_exchange))),
                        child: TextView(
                          text: "季卡VIP",
                          style: kTextStyle(
                              controller.selectIndex.value == 2
                                  ? COLOR.color_FF9205
                                  : COLOR.white,
                              fontsize: 15.w,
                              weight: FontWeight.w600),
                        ),
                      ).onOpaqueTap(() {
                        if (controller.selectIndex.value != 2) {
                          controller.selectIndex.value = 2;
                        }
                      }),
                      Container(
                        width: 76.w,
                        height: 60.w,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    controller.selectIndex.value == 3
                                        ? AppImagePath.vip_exchange_on
                                        : AppImagePath.vip_exchange))),
                        child: TextView(
                          text: "年卡VIP",
                          style: kTextStyle(
                              controller.selectIndex.value == 3
                                  ? COLOR.color_FF9205
                                  : COLOR.white,
                              fontsize: 15.w,
                              weight: FontWeight.w600),
                        ),
                      ).onOpaqueTap(() {
                        if (controller.selectIndex.value != 3) {
                          controller.selectIndex.value = 3;
                        }
                      }),
                    ],
                  )),
            ).sliverBox,
            ImageView(
              src: AppImagePath.mine_exchange_confirm,
              width: 320.w,
              height: 44.w,
              fit: BoxFit.cover,
            )
                .marginOnly(top: 36.w, left: 20.w, right: 20.w)
                .onOpaqueTap(() async {
              await controller.exchange();
            }).sliverBox,
            ImageView(
              src: AppImagePath.mine_exchange_record,
              width: 331.w,
              height: 63.w,
              fit: BoxFit.cover,
            ).marginOnly(left: 14.w, right: 14.w, top: 30.w).sliverBox
          ],
        ));
  }
}
